<template>
  <div
    v-if="!page?.body"
    class="flex h-[calc(100vh-3.5rem)] items-center justify-center"
  >
    <h3 class="scroll-m-20 border-r px-4 py-3 text-2xl font-semibold">
      404
    </h3>
    <span class="scroll-m-20 px-4">
      {{ $t('This page could not be found.') }}
    </span>
  </div>

  <template v-else>
    <div
      v-if="page?.fullpage"
      class="px-4 py-6 md:px-8"
      :class="[config.main.padded && 'container']"
    >
      <ContentRenderer
        :key="page._id"
        :value="page"
        :data="(appConfig.shadcnDocs as any)?.data"
      />
    </div>
    <main
      v-else
      class="relative py-6"
      :class="[config.toc.enable && (page.toc ?? true) && 'lg:grid lg:grid-cols-[1fr_220px] lg:gap-14 lg:py-8']"
    >
      <div class="mx-auto w-full min-w-0">
        <LayoutBreadcrumb v-if="page?.body && config.main.breadCrumb && (page.breadcrumb ?? true)" class="mb-4" />
        <LayoutTitle
          v-if="config.main.showTitle"
          :title="page?.title"
          :description="page?.description"
          :badges="page?.badges"
          :authors="page?.authors"
        />

        <UiEmpty v-if="page?.body?.children?.length === 0">
          <UiEmptyHeader class="max-w-full">
            <UiEmptyMedia variant="icon">
              <Icon name="lucide:circle-x" />
            </UiEmptyMedia>
            <UiEmptyTitle>{{ $t('Empty page') }}</UiEmptyTitle>
            <UiEmptyDescription v-if="isDev">
              <i18n-t keypath="Start writing content">
                <template #fileLink>
                  <ProseCodeInline>content/{{ page?._file }}</ProseCodeInline>
                </template>
              </i18n-t>
            </UiEmptyDescription>
          </UiEmptyHeader>
        </UiEmpty>

        <ContentRenderer
          v-else
          :key="page._id"
          :value="page"
          :data="(appConfig.shadcnDocs as any)?.data"
          class="docs-content"
        />

        <LayoutDocsFooter />
      </div>
      <div v-if="config.toc.enable && (page.toc ?? true)" class="hidden text-sm lg:block">
        <div
          class="sticky"
          :class="[
            (config.aside.useLevel && config.aside.levelStyle === 'aside') ? 'md:top-[91px]' : 'md:top-[133px]',
          ]"
        >
          <LayoutToc :is-small="false" />
        </div>
      </div>
    </main>
  </template>
</template>

<script setup lang="ts">
const { page } = useContent();
const config = useConfig();
const appConfig = useAppConfig();

const isDev = import.meta.dev;

useSeoMeta({
  title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
  ogTitle: page.value?.title,
  description: page.value?.description,
  ogDescription: page.value?.description,
  twitterCard: 'summary_large_image',
});

defineOgImageComponent(config.value.site.ogImageComponent, {
  title: page.value?.title,
  description: page.value?.description,
});
</script>
